一丶区域打印

将当前区域装载到一个容器  并将该容器绝对定位到左上角  进行打印操作  

一般的打印工作 都能解决   但对表格有不好的兼容性   只会拿出表格内容

通过html2canvas插件将局部转为图片  再通过printJs将图片调为打印操作

这个操作仅适用于内容不多的页面   耗时长  效果不佳  

 因为html2canvas 生成图片的时候  会处理样式  

 对没有固定值的元素特别不友好   阵型会乱  相比推荐第一种

这个操作流程其实和第一种一样 

但页面是重新生成的   相对第一种会更有可控性 

毕竟打印的页面和原页面有一定出入

以下一般有插件实现  下面推荐几款

推荐vue-print-nb 和 printJs  

统一的处理流程如下：   有兴趣可以去读下源码

第一步 生成html文档头

第二步 克隆 link标签  样式标签 自定义样式

第三步 克隆打印区域

第四步 生成iframe框架 并将生成的document添加进去

然后选择监听load事件   执行打印功能  最后当打印线程堵塞结束后执行移除操作  

 浏览器默认打印区域为整个页面   

A4纸张的大小为  21m * 29.7cm  一英尺等于 2.54cm   

系统获取页面时 会将整页内容在可控的情况下进行缩放   

面对固定宽度时  会忽略超出的距离 

面对自适应布局时  会可控的缩放距离     如 ：百分比  flex  

A4的纸张是有默认大小的   即使网页会随着自适应布局缩放  但也会有不可控的因素

可求纸张在当前屏幕的大小    将打印内容进行适配

内容不足以填充全屏的  打印的区域大小要固定 内容区域采用自适应布局

内容足以填充全屏的  打印的区域不固定 内容区域采用自适应布局

求A4纸张的大小  可以通过电脑屏幕的英寸求出  屏幕的宽       

比如  我的电脑16英寸  16:9 屏占比  公式如下   

屏宽² + （屏高）² = （屏幕尺寸的面积）²

x²+(0.5625X)² = (408.94)²

                    x = 35.64

35.64 / 2.54 = 14.03

实际英寸也差不多   但是浏览器没有提供电脑的英寸大小相关参数

网上也有很多获取英寸的例子  例如 ： 利用1in获取当前屏幕1英寸的像素  但实际出入很大

我得到的是 96dpi    而我实际的dpi为  137dpi

通过计算得到合理的dpi就失败了   

当采用计算获得的96dpi   在我1920 * 1080 的屏幕中  A4纸的大小为：

纵向（29.7 / 2.54）* 96 == 1122.24

横向（21 / 2.54）* 96 == 793.92

纵向打印 内容不足撑起页面时   可以将打印区域宽固定在 793.92

横向打印 内容超出当前页面时   可以将超出的元素 在 1122宽 的基础上进行zoom缩放

                未缩放的内容   要保持在一个固定宽的容器内   不然其他内容会在内容不足的情况下占据更多的空间 因为你采用了自适应布局

【1】page-break-before（指定元素前添加分页符）

【2】page-break-after（指定元素后添加分页符）

【3】page-break-inside（用于设置是否在指定元素中插入分页符）

注意：

不能对绝对定位的元素使用以上三种分页属性。

请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

分页的表格可以使用分页符放到下一页，不然因为table头部样式多 造成分页表头样式杂乱。

【4】设置默认的打印方向 和 边距

@page{

      size: portrait; /* 纵向 */

      size: landscape;/* 横向 */

       margin:1cm 2cm 1cm 2cm; * 边距 上右下左 */

    }

【5】除去默认的页眉页脚

@mediaprint {

    @page{

            margin:0;

      }

    body{

            margin:1cm;

          }

    }

【6】添加指定的页眉页脚

@page {

    size: A4 portrait; /*  */

    margin: 3.7cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */

    @bottom-left, @bottom-center, @bottom-right {     /* 页面内容区域底部添加一条 1px 的灰线 */

        border-top: 1px solid gray;

    }

    @bottom-center {        /* 页脚中间显示格式如 "第 3 页" 的页码 */

        content: "第" counter(page) "页";

    }

}

【7】伪类选择器

/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */

@page :left {

    margin-left: 2.5cm;

    margin-right: 2.7cm;

}

@page :right {

    margin-left: 2.7cm;

    margin-right: 2.5cm;

}

还有以下伪类 ：

支持的有 :left、:right、:first、:blank

:left、:right：需要双面打印的时候，通常会用到，对左页和右页设置不同的样式（如页码）；

:first：用于匹配文档的第一页；

:blank：用于匹配文档的空白页；

注意⚠️：代码里面设置了左页和右页的不同样式，不代表用户代理那里就一定会进行双面打印；

注意⚠️：空白页既可以是左页也可以是右页，设置左页和右页的样式也会显示到空白页面上，如果不需要刻意清楚

可以使用IE的css属性 zoom  对元素焦点进行缩放。

当然css也有缩放，但是属于画面上的缩放，体积不会变小。依然会占据原大小，实际效果不佳。

当表格超出时应该采用计算的形式将表格缩放至所在区域大小。计算公式为 区域大小 / 表格大小 。

区域的大小就是通过上面计算出的纸张的宽      针对不一样的纸张和方向开展计算

将得到的缩放值赋给 表格

在默认的打印范围缩放 打印的显示效果最佳

注：禁止直接搬运  请在有深入研究后借鉴